   <div style="padding:20px">
        <article id="page1">  
       <form id="form1" class="form-inline" style="margin-bottom: 20px" action="{:U('index/order')}" method="post">
           <div class="form-group" style="    float: left;">
              <label for="exampleInputName2">姓名</label>
              <input type="text" class="form-control" id="exampleInputName2" placeholder="姓名" name="user_name">
            </div>        
             <div class="form-group" style="margin-left:5px;    float: left;">
              <label for="exampleInputName3">订单号</label>
              <input type="text" class="form-control" id="exampleInputName3" placeholder="订单号" name="order_sn">
            </div>     
           <div class="dropdown" style="margin-left: 5px;    float: left;">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              订单状态
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
              <li><a href="{:U('index/order?order_status=1')}">已付款</a></li>
              <li><a href="{:U('index/order?order_status=0')}">未付款</a></li>            
            </ul>
          </div>
            <button type="button" class="btn btn-default" id="search" style="margin-left:5px">搜索</button>          
        </form>
        
        <table class="table table-condensed table-bordered table-hover">
           <tr id="first_tr">
             <td>订单号</td>
             <td>下单用户</td>
             <td>订单状态</td> 
             <td>添加时间</td> 
             <td>总计</td> 
             <td>操作</td> 
           </tr>
          <?php if(!empty($orderInfo) && is_array($orderInfo)):?> 
            <?php foreach ($orderInfo as $k=>$v):?>
                  <tr>
                      <td style="text-align: center;vertical-align: middle;">{$v['order_sn']}</td>
                      <td style="text-align: center;vertical-align: middle;">{$v['user_name']}</td>
                      <?php if($v['order_status'] == 0):?>
                         <td style="text-align: center;vertical-align: middle;color: red" order_id="<?php echo $v['order_id']?>">未付款</td>
                         <?php else:?>
                          <td style="text-align: center;vertical-align: middle;color:green">已付款</td>
                      <?php endif;?>
                          <td style="text-align: center;vertical-align: middle;"><?php echo date('Y-m-d H:i:s',$v['addtime'])?></td>
                          <td style="text-align: center;vertical-align: middle;">{$v['total_price']}</td>                       
                       <?php if($v['order_status'] == 0):?>
                          <td style="text-align: center;vertical-align: middle;">
                              <button type="button" class="btn btn-default see" order_id="<?php echo $v['order_id']?>">查看</button>
                              <button type="button" class="btn btn-default check" order_id="<?php echo $v['order_id']?>">更改为已付款</button>
                          </td>
                       <?php else:?>
                          <td style="text-align: center;vertical-align: middle;">
                               <button type="button" class="btn btn-default see" order_id="<?php echo $v['order_id']?>">查看</button>
                              <button type="button" class="btn btn-default check" order_id="<?php echo $v['order_id']?>" disabled="disabled">已支付</button>
                          </td>
                      <?php endif;?>
             </tr>
             <?php endforeach;?>
           <?php endif;?>  
        </table>
         <div class="page" style="width:500px;margin: 0 auto">{$page}</div>
        </article>
        
        <article id="page2" style="display: none">
           <button type="button" class="btn btn-default" style="margin-bottom:5px;" id="exit"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>返回</button>
           <table class="table table-condensed table-bordered table-hover" id="orderDetial">
                <tr id="first_tr">
                 <td>姓名</td>
                 <td>身份证号码</td>
                 <td>查询次数</td> 
               </tr>         
            </table>
        </article>
           <!--模态框开始-->
    <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="title">友情提示</h4>
      </div>
        <div class="modal-body" id="content">
            请确认已收到货款!
        </div>
      <div class="modal-footer">
          <button type="button" class="btn btn-danger" id="yes" data-dismiss="modal" order_id="">已确认</button>   
        <button type="button" class="btn btn-default" data-dismiss="modal">否</button>   
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--模态框结束-->

<!--模态框开始-->
    <div class="modal fade" tabindex="-1" role="dialog" id="orderModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="title">错误提示</h4>
      </div>
        <div class="modal-body" id="content">
           <p>请至少输入一个查询条件!</p>
        </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>   
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--模态框结束-->
    </div>
    <script>
           $(function(){
               
               $('.see').click(function(){
                   $(this).each(function(){
                       var order_id = $(this).attr('order_id');
                       $.get('<?php echo U("index/orderDetial")?>',{'order_id':order_id},function(e){
                            $('.secondTr').remove();
                            $('#orderDetial tbody').append(e);
                            $('#page1').slideUp('normal',function(){
                                    $('#page2').slideDown();                       
                                });
                       })
//                       $('#page1').slideUp('normal',function(){$('#page2').slideDown()})
                   })
               })    
               
                $('#exit').click(function(){
                    $('#page2').slideUp('normal',function(){$('#page1').slideDown()})
            })
               
               $('#search').click(function(){
                    var user_name = $.trim($('#exampleInputName2').val());
                    var order_sn = $.trim($('#exampleInputName3').val());
                    if(user_name == '' && order_sn == ''){
                         $('#orderModal').modal('show');
                    }else{
                        $('#form1').submit();
                    }
                });
               
               $('.check').click(function(){
                   $(this).each(function(){
                        var order_id = $(this).attr('order_id');
                        $('#yes').attr('order_id',order_id);
                        $('#myModal').modal('show');                        
                   })
               })
               
               $('#yes').click(function(){
                            var order_id = $(this).attr('order_id');    
                            $.getJSON('<?php echo U("index/checkStatus")?>',{'order_id':order_id},function(e){
                                 if(e.status == 1){
                                     $('td[order_id='+order_id+']').css('color','green').html('已付款');
                                     $('.check[order_id='+order_id+']').html('已支付').attr('disabled','disabled');
                                 }
                            })
                        })
           }) 
    </script>
